<template>
  <a-flex justify="space-between" align="center" class="mt-6" id="a-flex-157">
    <a-typography-link href="#" class="relative !text-[#c3000b] text-2xl px-1 font-bold pb-2" id="a-typography-link-158">
      能源消费
      <a-divider class="border-4 border-[#c3000b] absolute -bottom-0.5 inset-x-0 my-0" id="a-divider-159" />
    </a-typography-link>
  </a-flex>
  <a-divider class="border-[#c3000b] my-0" id="a-divider-160" />
  <a-row class="!mx-0 my-6" :gutter="30" id="a-row-161">
    <a-col :span="8" class="!pl-0" id="a-col-162">
      <a-flex align="center" class="pl-6 relative mb-4 bg-[#eee]" justify="space-between" id="a-flex-163">
        <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-full" id="a-divider-164" />
        <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-165"> 口碑广场 </a-typography-link>
      </a-flex>
      <a-flex vertical :gap="10" class="mb-8" id="a-flex-166">
        <a-typography-link href="#" v-for="(item, index) in list14" :key="index" :id="`a-typography-link-167-${index}`">
          <a-typography-text v-if="!item.img" class="!text-[#212121] text-lg line-clamp-1" :id="`a-typography-text-168-${index}`">{{
            item.title
          }}</a-typography-text>
          <a-flex v-else :gap="20" :id="`a-flex-169-${index}`">
            <a-typography-link href="#" vertical class="w-2/5" :id="`a-typography-link-170-${index}`">
              <a-image :src="item.img" :preview="false" class="aspect-[3/2]" :id="`a-image-171-${index}`" />
            </a-typography-link>
            <a-flex vertical class="flex-1" :id="`a-flex-172-${index}`">
              <a-typography-title :level="5" class="line-clamp-1" :id="`a-typography-title-173-${index}`">{{
                item.title
              }}</a-typography-title>
              <a-typography-paragraph class="line-clamp-3 text-[#666] text-lg" :id="`a-typography-paragraph-174-${index}`">{{
                item.desc
              }}</a-typography-paragraph>
            </a-flex>
          </a-flex>
        </a-typography-link>
      </a-flex>
      <a-flex align="center" class="pl-6 relative mb-4 bg-[#eee]" justify="space-between" id="a-flex-175">
        <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-full" id="a-divider-176" />
        <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-177"> 低碳生活+ </a-typography-link>
      </a-flex>
      <a-typography-link href="#" class="flex flex-col relative" id="a-typography-link-178">
        <a-image src="https://picsum.photos/id/50/1000/800" :preview="false" class="aspect-[17/8]" id="a-image-179" />
        <a-typography-paragraph
          class="!mb-0 text-white text-lg absolute bottom-0 inset-x-0 line-clamp-1 pl-2"
          id="a-typography-paragraph-180"
        >
          提升生产到消费全过程“含绿量” 大力推动消费模式绿色转型
        </a-typography-paragraph>
      </a-typography-link>
    </a-col>
    <a-col :span="8" id="a-col-181">
      <a-flex vertical v-for="(item, index) in list15" :key="index" :id="`a-flex-182-${index}`">
        <a-flex align="center" class="pl-6 relative mb-2" justify="space-between" :id="`a-flex-183-${index}`">
          <a-divider
            type="vertical"
            class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3"
            :id="`a-divider-184-${index}`"
          />
          <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" :id="`a-typography-link-185-${index}`">
            {{ item.title }}
          </a-typography-link>
        </a-flex>
        <a-flex vertical :gap="5" class="mb-2" :id="`a-flex-186-${index}`">
          <a-typography-link
            href="#"
            class="line-clamp-1 !text-[#333] text-lg"
            v-for="(item1, index1) in item.list"
            :key="index1"
            :id="`a-typography-link-187-${index}-${index1}`"
          >
            <a-badge color="#eaeaea" :id="`a-badge-188-${index}-${index1}`" />
            {{ item1 }}
          </a-typography-link>
        </a-flex>
      </a-flex>
    </a-col>
    <a-col :span="8" class="!pr-0" id="a-col-189">
      <a-flex align="center" class="pl-6 relative mb-2" justify="space-between" id="a-flex-190">
        <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3" id="a-divider-191" />
        <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-192"> 科技</a-typography-link>
      </a-flex>
      <a-flex vertical :gap="10" class="mb-6" id="a-flex-193">
        <a-typography-link href="#" v-for="(item, index) in list16" :key="index" :id="`a-typography-link-194-${index}`">
          <a-typography-text v-if="!item.img" class="!text-[#212121] text-lg line-clamp-1" :id="`a-typography-text-195-${index}`">{{
            item.title
          }}</a-typography-text>
          <a-flex v-else :gap="20" :id="`a-flex-196-${index}`">
            <a-typography-link href="#" vertical class="w-2/5" :id="`a-typography-link-197-${index}`">
              <a-image :src="item.img" :preview="false" class="aspect-[3/2]" :id="`a-image-198-${index}`" />
            </a-typography-link>
            <a-flex vertical class="flex-1" :id="`a-flex-199-${index}`">
              <a-typography-title :level="5" class="line-clamp-1" :id="`a-typography-title-200-${index}`">{{
                item.title
              }}</a-typography-title>
              <a-typography-paragraph class="line-clamp-3 text-[#666] text-lg" :id="`a-typography-paragraph-201-${index}`">{{
                item.desc
              }}</a-typography-paragraph>
            </a-flex>
          </a-flex>
        </a-typography-link>
      </a-flex>
      <a-typography-link href="#" class="flex flex-col relative" id="a-typography-link-202">
        <a-image src="https://picsum.photos/id/54/1000/800" :preview="false" class="aspect-[19/7]" id="a-image-203" />
      </a-typography-link>
    </a-col>
  </a-row>
  <a-row class="!mx-0 mb-6" :gutter="30" id="a-row-204">
    <a-col :span="16" class="!pl-0" id="a-col-205">
      <a-typography-link href="#" class="flex flex-col" id="a-typography-link-206">
        <a-image src="https://picsum.photos/id/37/1000/800" class="aspect-[10/1]" :preview="false" id="a-image-207" />
      </a-typography-link>
    </a-col>
    <a-col :span="8" class="!pr-0" id="a-col-208">
      <a-typography-link href="#" class="flex flex-col" id="a-typography-link-209">
        <a-image src="https://picsum.photos/id/38/1000/800" class="aspect-[5/1]" :preview="false" id="a-image-210" />
      </a-typography-link>
    </a-col>
  </a-row>
  <a-row class="!mx-0 mb-6" :gutter="30" v-for="(item, index) in list17" :key="index" :id="`a-row-211-${index}`">
    <a-col :span="16" class="!pl-0" :id="`a-col-212-${index}`">
      <a-flex justify="space-between" align="center" :id="`a-flex-213-${index}`">
        <a-typography-link href="#" class="relative !text-[#c3000b] text-2xl px-1 font-bold pb-2" :id="`a-typography-link-214-${index}`">
          {{ item.title }}
          <a-divider class="border-4 border-[#c3000b] absolute -bottom-0.5 inset-x-0 my-0" :id="`a-divider-215-${index}`" />
        </a-typography-link>
      </a-flex>
      <a-divider class="border-[#c3000b] my-0" :id="`a-divider-216-${index}`" />
      <a-flex :gap="30" class="mt-6" :id="`a-flex-217-${index}`">
        <a-typography-link href="#" v-for="(item1, index1) in item.list" :key="index1" :id="`a-typography-link-218-${index}-${index1}`">
          <a-image :src="item1.img" :preview="false" class="aspect-[2/1]" :id="`a-image-219-${index}-${index1}`" />
          <a-typography-paragraph
            class="!mb-0 mt-2 text-xl text-center line-clamp-1"
            :id="`a-typography-paragraph-220-${index}-${index1}`"
            >{{ item1.title }}</a-typography-paragraph
          >
        </a-typography-link>
      </a-flex>
    </a-col>
    <a-col :span="8" class="!pr-0" :id="`a-col-221-${index}`">
      <a-flex justify="space-between" align="center" :id="`a-flex-222-${index}`">
        <a-typography-link href="#" class="relative !text-[#c3000b] text-2xl px-1 font-bold pb-2" :id="`a-typography-link-223-${index}`">
          {{ item.title1 }}
          <a-divider class="border-4 border-[#c3000b] absolute -bottom-0.5 inset-x-0 my-0" :id="`a-divider-224-${index}`" />
        </a-typography-link>
      </a-flex>
      <a-divider class="border-[#c3000b] my-0" :id="`a-divider-225-${index}`" />
      <a-flex vertical :gap="10" class="mt-5" :id="`a-flex-226-${index}`">
        <a-typography-link
          href="#"
          v-for="(item1, index1) in item.list1"
          :key="index1"
          class="!text-[#212121] text-lg line-clamp-1"
          :id="`a-typography-link-227-${index}-${index1}`"
        >
          {{ item1 }}
        </a-typography-link>
      </a-flex>
    </a-col>
  </a-row>
</template>

<script setup>
  const list14 = [
    {
      title: '香港贸发局公布ESG指数初步数值为64.3分',
      desc: '2月24日，香港贸易发展局公布 “香港贸发局 ESG 指数” ，初步数值为64.3 分，高于 50 分的分水岭，这一结果表明，国际、中国内地及香港本地贸易商对香港在可持续发展业务上的地位表示认可。',
      img: 'https://picsum.photos/id/45/1000/800',
    },
    {
      title: '京东、美团等平台掀“社会责任风暴” 企业间ESG表现竞争或越发激烈',
    },
    {
      title: '茅台要涨价？多位业内人士称供货价已提价约22%，高管最茅台要涨价？多位业内人士称供货价已提价约22%',
    },
  ];
  const list15 = [
    {
      title: '消费者头条',
      list: [
        '金价高位回调 趁机购入还是继续观望？',
        '卖100元游戏账号却被骗3000元 闲鱼新卖家掉入“保证金”骗局',
        '“未成年旅客滞留国外机场16小时”后续，消协：去哪儿网理应承担相应责任',
      ],
    },
    {
      title: '新品动态',
      list: [
        '新款小鹏G6内饰官图发布：这一常用功能改为手动了',
        '“未成年旅客滞留国外机场16小时”后续，消协：去哪儿网理应承担相应责任',
        '小米SU7 Ultra正式发布，定价52.99万元！5种颜色全公布',
        '理想i8官方图放出：对标Model X，定位纯电中大型六座SUV',
      ],
    },
    {
      title: '节能减排',
      list: [
        '家电回收产业迎爆发式增长 将突破2亿台',
        '广东省珠海市外伶仃岛用上放心电—— 一份平价电费单背后的民主实践',
        '理想i8官方图放出：对标Model X，定位纯电中大型六座SUV',
        '海南三方面发力工业节能减排 降碳效果显著',
      ],
    },
    {
      title: '汽车',
      list: [
        '全国政协常委韦朝晖：新能源车等中国—东盟跨境产供链取得长足进步',
        '2025年2月蔚来公司交付新车达1.32万辆，同比增长62.2%',
        '2025年2月极氪科技集团新车销量为3.12万辆',
        '海南三方面发力工业节能减排 降碳效果显著',
        '广东省珠海市外伶仃岛用上放心电—— 一份平价电费单背后的民主实践',
      ],
    },
  ];
  const list16 = [
    {
      title: ' “蛟龙号”硬核升级不停步 深海探秘更有“潜力”',
      desc: '央视网消息：“蛟龙号”是我国自主研发的7000米级载人潜水器，累计下潜超300次，作为“国之重器”，“蛟龙号”的调查范围已覆盖太平洋、印度洋和大西洋等海域。',
      img: 'https://picsum.photos/id/57/1000/800',
    },
    {
      title: '美月球着陆器“蓝色幽灵”号成功在月球着陆',
    },
    {
      title: '我国研究团队在宽禁带半导体光电探测领域取得重要进展',
    },
    {
      title: '重载货车检修基地来了“机器人工友”',
    },
    {
      title: 'DeepSeek促AI开源浪潮涌动',
    },
    {
      title: '“最老”现役火箭发射“最精”商业卫星',
    },
  ];
  const list17 = [
    {
      title: '视频',
      list: [
        {
          img: 'https://picsum.photos/id/70/1000/800',
          title: '欧盟委员会：欧盟将对贸易壁垒作出坚决且迅速的回应',
        },
        {
          img: 'https://picsum.photos/id/71/1000/800',
          title: '泰国一巴士发生翻车事故 致17人死亡超40',
        },
      ],
      title1: '企业动态',
      list1: [
        '保碧新能源董事长李文轩：让分布式光伏成为全球市场最受欢迎的资产类型',
        '吉电股份“柔控装置”改造项目入选国家重点推广低碳技术目录',
        '解码新能源黑科技！《张朝阳的物理课》走进阳光电源',
        '隆基李振国：以自主创新和中国原创技术引领光伏产业发展',
        '“灯塔工厂”全面升级，HPBC  2.0产线全面投产',
        'AI+储能，天合光能携手新加坡南洋理工大学',
        '解码新能源黑科技！《张朝阳的物理课》走进阳光电源',
        '解码新能源黑科技！《张朝阳的物理课》走进阳光电源',
        '隆基李振国：以自主创新和中国原创技术引领光伏产业发展',
      ],
    },
    {
      title: '图集',
      list: [
        {
          img: 'https://picsum.photos/id/72/1000/800',
          title: '中国成功发射四维高景一号03、04星',
        },
        {
          img: 'https://picsum.photos/id/73/1000/800',
          title: '春日铁路建设忙',
        },
      ],
      title1: '会议会展',
      list1: [
        '百人会论坛（2025）专家媒体交流会在京召开',
        '工信部：政府加强标准引领，巩固提升全球竞争优势',
        '邢翼腾：持续强化自律与创新，真正跨越行业周期',
        '“人工智能技术及其应用进展”专题边会在巴黎举行',
        '2025智能化交通与自动驾驶欲往何方',
        '邢翼腾：持续强化自律与创新，真正跨越行业周期',
        '第十七届消费车型盛典：遇见新模式、新市',
        '工信部：政府加强标准引领，巩固提升全球竞争优势',
        '邢翼腾：持续强化自律与创新，真正跨越行业周期',
      ],
    },
  ];
</script>
<style></style>
